<template>
  <div id="page-vip-member-pay-list">
    <Card>
      <h3>会员缴费历史</h3>
      <Table
        :columns="columns"
        :data="list"
        no-data-text="该查询条件没有任何数据"
        class="mt20">
      </Table>
    </Card>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import moment from 'moment'
  import vipApi from '@/api/vip'

  export default {
    name: 'pay-list',
    data () {
      let memberId = this.$route.params.memberId
      return {
        query: {
          pkRcId: null,
          pkMemberInfo: memberId,
          currentPage: 1,
          limit: 10
        },
        columns: [
          {
            title: '序号',
            width: 50,
            render: (h, params) => {
              return (this.query.currentPage - 1) * this.query.limit + params.row._index + 1
            }
          },
          {
            title: '缴费时间',
            key: 'openName',
            render: (h, params) => {
              let { row } = params
              if (row.bdDate) {
                return moment(row.bdDate).format('YYYY-MM-DD HH-mm-ss')
              } else {
                return '-'
              }
            }
          },
          {
            title: '会员有效时间',
            key: 'realName',
            render: (h, params) => {
              let { row } = params
              if (row.bdDate) {
                return moment(row.bdDate).format('YYYY-MM-DD HH-mm-ss')
              } else {
                return '-'
              }
            }
          },
          {
            title: '缴费金额',
            key: 'status',
            render: (h, params) => {
              let { row } = params
              return !row.status ? '已关注' : '未关注'
            }
          }
        ],
        list: []
      }
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo'
      })
    },
    methods: {
      async list () {
        this.query.pkRcId = this.userInfo.pkRclubInfo
        const { body } = await vipApi.memberDetail(this.query)
        const { responseData } = body
        if (this.$apiHelper.requestSuccessed(body.responseCode)) {
          this.form.data = responseData
        } else {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: body.desc,
              onOk: () => {}
            })
          }, 500)
        }
      }
    },
    async mounted () {
      this.$store.dispatch('getUserInfo')
      this.detail()
    }
  }
</script>

<style lang="less">
</style>

